@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin dialogScrollBar {
  scroll-margin: 20px;
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  &::-webkit-scrollbar {
    width: 12px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: #d6d6d6;
    width: 20px;
    border-radius: 20px;
    box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-thumb {
    background: #ffffff;
    @apply rounded-full;
    border: 2px solid #d6d6d6;
    transition: all 0.5s ease-out;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #f6f6f6;
    box-shadow: 2px 1px 3px rgba(245, 243, 243, 0.2);
    cursor: pointer;
  }
}
